<template>
	<view class="userpage">
		<view class="searchbox">
			<view class="putbox">
				<input type="text" placeholder="请输入名称/病种"  v-model="searchvalue"/>
				<view class="searchbtn" @click="search">
					搜索
				</view>
			</view>
		</view>
		<view class="toptabbar">
			<view class="itemtabbar" :class="toptab==0?'act':''" @click="selecttoptab(0)">
				<view class="barname">
					全部用户
				</view>
				<view class="number">
					({{totalCounts.type0}}人)
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtabbar" :class="toptab==1?'act':''" @click="selecttoptab(1)">
				<view class="barname">
					我主管的
				</view>
				<view class="number">
					({{totalCounts.type1}}人)
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtabbar" :class="toptab==2?'act':''" @click="selecttoptab(2)">
				<view class="barname">
					我协管的
				</view>
				<view class="number">
					({{totalCounts.type2}}人)
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtabbar"  @click="winshow=true">
				<view class="barname">
					添加用户
				</view>
			
				<view class="line">
					
				</view>
			</view>
			
		</view>
		
		<view class="listbox">
			<view class="itemlist" v-for="item in list" :key="item.id"  @click="lookinfo(item)">
				<view class="imgbox">
					<image  :src="item.member.imgUrl ? 'https://changban.dianjingkeji.net' + item.member.imgUrl : 'https://changban.dianjingkeji.net/img/微信图片_20250923172704_692_133.jpg'" mode=""></image>
				
				</view>
				<view class="infobox">
					<view class="nameline">
						<view class="namebox">
							{{item.member.memberName||'新用户'}}
							<view class="level">
								{{item.member.memberLevel==1?'普通用户':item.member.memberLevel==3?'专病会员':item.member.memberLevel==4?'银卡会员':item.member.memberLevel==5?'金卡会员':'黑卡会员'}}
							</view>
						</view>
						<view class="name">
							{{item.member.memberPhone}}
						</view>
						
					</view>
					<view class="label">
						病程：{{item.member.memberBingcheng||'未填写'}}| 年龄{{item.member.memberAge||"未填写"}}
					</view>
				</view>
				<view class="right">
					<view class="btn1" v-if="por.drole!=4&&item.member.memberLevel==3" @click.stop="suifang(item)">
						随访
					</view>
					<view class="btn1" v-if="item.member.memberLevel==3" @click.stop="xingdong(item)">
						关键行动
					</view>
					<view class="btn1" v-if="item.tnum!=''&& por.drole!=4&&item.member.memberLevel==3 " @click.stop="selectrole(item)">
					  邀请团队
					</view>
				</view>
				
			</view>
		</view>
		
	
		<view class="winpage" v-if="winshow">
			<view class="win">
				<view class="wintitle">
					分享给好友
					<view class="iconfont icon-guanbi" @click="winshow=false">
						
					</view>
				</view>
				<view class="cardbox" ref="cardbox">
					
					<image class="backimg" src="https://changban.dianjingkeji.net/img/banner-1-拷贝.jpg" mode=""></image>
					<view class="infobox">
						<view class="infotop">
							<image :src="'https://changban.dianjingkeji.net'+pro.dAvatarUrl" mode=""></image>
							<view class="namebox">
								<view class="name">
									{{pro.dName}}
								</view>
								<view class="zhichengline">
									<view class="itemzhicheng">
									{{pro.dZhicheng}}
									</view>
								</view>
							</view>
						</view>
						<view class="keshi">
							{{pro.dKeshi}}
						</view>
						<view class="hospitalname">
							{{pro.orgName}}
						</view>
					</view>
					<view class="titlebox">
						<view class="title">
							离院有人管
						</view>
						<view class="label">
							健康管理没有终点，我们为您提供7*24小时的在线陪伴与指导
						</view>
						<view class="title">
							有问随时答
						</view>
						<view class="label">
							点击下方卡片，立即加入专属服务群，激活您的专属生活方式管理服务。
						</view>
					</view>
					<view class="sanline">
						<view class="left">
							<view class="label">
								长按/扫码关注
							</view>
							<view class="label">
								加入我的工作室体验健康管理服务
							</view>
						</view>
						<view class="right">
							<image :src="'https://changban.dianjingkeji.net'+pro.tuijiancode"  @click="lookinfocard"></image>
						</view>
					</view>
				</view>
				<canvas canvas-id="poster-canvas" style="position: absolute; top: 102vh; width: 850rpx; height: 1334rpx;"></canvas>
				<view class="btnbox">
					<button open-type="share" class="itembtn" >
						<view class="iconfont icon-weixin1 weixin">
							
						</view>
						<view class="btnname">
							微信
						</view>
					</button>
					<view class="itembtn" @click="drawPoster">
						<view class="iconfont icon-xiazai xiazai">
							
						</view>
						<view class="btnname">
						保存
						</view>
					</view>
					<!-- <view class="itembtn">
						<view class="iconfont icon-QQ xiazai">
							
						</view>
						<view class="btnname">
							QQ
						</view>
					</view>
					<view class="itembtn">
						<view class="iconfont icon-lianjie lianjie">
							
						</view>
						<view class="btnname">
							链接
						</view>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="winpage" v-if="teamwin">
			<view class="teamwin">
				<view class="wintitle">
					邀请团队
					<view class="iconfont icon-guanbi" @click="teamwin=false">
						
					</view>
				</view>
				
				<view class="teamlistbox">
					<view class="itemrole" v-for="(item,index) in prolist" :key="index" @click="selectdoctor(item)">
						{{item==0?'邀请领衔专家':item==1?'邀请联席专家':item==2?'邀请主管医生':item==3?'邀请主管护士':item==4?'邀请6X健康管家':''}}
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		<view class="foot-tabbar">
			<view class="itemfootbar" @click="gohome">
				<image src="/static/tabbar/首页 (1).png" mode=""></image>
				<view class="tabbarname ">
					首页
				</view>
			</view>
			<view class="itemfootbar" @click="goxueshu">
				<image src="/static/tabbar/学位帽.png" mode=""></image>
				<view class="tabbarname ">
					学术
				</view>
			</view>
			<view class="itemfootbar footbardata"  @click="gosuifang">
				<image src="/static/tabbar/first-aid-kit-line.png" mode=""></image>
				<view class="tabbarname ">
					随访
				</view>
			</view>
			<view class="itemfootbar">
				<image src="/static/tabbar/团队 (1).png" mode=""></image>
				<view class="tabbarname footact">
				用户
				</view>
			</view>
			<view class="itemfootbar" @click="gocenter" >
				<image src="/static/tabbar/我的.png" mode=""></image>
				<view class="tabbarname ">
					我的
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {getInfo,doctorTeamList,getInvitedList} from '../../utils/api.js'
	export default {
		data() {
			return {
				searchvalue:'',
				toptab:'',
				winshow:false,
				teamwin:false,
				list:[],
				member:{},
				prolist:[],
				pro:{
					reviewerstatus:3
				},
				totalCounts:{
					type0:'',
					type1:'',
					type2:''
				}
			}
		},
		onLoad(e) {
			console.log(e)
			if(e.type){
				this.toptab=e.type
			}else{
				this.toptab=0
			}
		},
		onShow() {
		
			
			let p={
				phone:uni.getStorageSync('phone'),
				type:this.toptab,
				selectValue:this.searchvalue
			}
		  getInfo(p).then(res=>{
			  if(res.data.code==200){
				   uni.setStorageSync('type',res.data.data.usertype)
				 console.log(res,'用户信息')
				 this.pro=res.data.data
				 uni.setStorageSync('user',res.data.data)
				 doctorTeamList(p).then(res=>{
				 			  console.log(res,'团队列表')
				 			  this.list=res.data.data.list
				 			  this.totalCounts=res.data.data.totalCounts
				 }) 
			  }
			 
		  })
		  
		},
		methods: {
			
 drawPoster() {
			   const ctx = uni.createCanvasContext('poster-canvas');
			   
			   // 1. 下载并绘制背景图
			   uni.downloadFile({
			     url: 'https://changban.dianjingkeji.net/img/banner-1-拷贝.jpg',
			     success: (res) => {
			       if (res.statusCode === 200) {
			         // 绘制背景图
			         ctx.drawImage(res.tempFilePath, 0, 0, 750, 1000);
			         
			         // 2. 绘制头像（需先下载网络图片）
			         uni.downloadFile({
			           url: `https://changban.dianjingkeji.net${this.pro.dAvatarUrl}`,
			           success: (res) => {
			             const imgPath = res.tempFilePath;
			             ctx.drawImage(imgPath, 30, 30, 130, 130);
			             
			             // 3. 绘制文字
			             ctx.setFontSize(16);
			             ctx.setFillStyle('#333333');
			             ctx.fillText(this.pro.dName, 200, 70);
			             ctx.fillText(this.pro.dZhicheng, 200, 100);
			             ctx.fillText(this.pro.dKeshi, 200, 130);
			             ctx.fillText(this.pro.orgName, 200, 160);
			             
			             // 4. 绘制标题和描述
			             ctx.setFontSize(18);
			             ctx.fillText('离院有人管', 10, 220);
			             ctx.setFontSize(14);
			             ctx.fillText('健康管理没有终点，我们为您提供7*24小时的在线陪伴与指导', 10, 240);
						 ctx.setFontSize(18);
						 ctx.fillText('有问随时答', 10, 280);
						 ctx.setFontSize(14);
						 ctx.fillText('点击下方卡片，立即加入专属服务群，', 10, 310);
						 ctx.setFontSize(14);
						 ctx.fillText('激活您的专属生活方式管理服务。', 10, 330);
			             
			             // 5. 绘制底部二维码（需先下载）
			             uni.downloadFile({
			               url: `https://changban.dianjingkeji.net${this.pro.tuijiancode}`,
			               success: (res) => {
			                 const qrPath = res.tempFilePath;
			                 ctx.drawImage(qrPath, 200, 380, 150, 150);
			                 
			                 // 6. 绘制底部文字
			                 ctx.setFontSize(12);
			                 ctx.fillText('长按/扫码关注', 50, 380);
			                 ctx.fillText('加入我的工作室', 50, 410);
			                 
			                 // 7. 保存图片
			                 ctx.draw(true, () => {
			                   uni.canvasToTempFilePath({
			                     canvasId: 'poster-canvas',
			                     success: (res) => {
			                       uni.saveImageToPhotosAlbum({
			                         filePath: res.tempFilePath,
			                         success: () => uni.showToast({ title: '保存成功' }),
			                         fail: (err) => console.error(err)
			                       });
			                     }
			                   });
			                 });
			               }
			             });
			           }
			         });
			       } else {
			         uni.showToast({ title: '背景图下载失败', icon: 'none' });
			       }
			     }
			   });
			 },
			
			sendeweixin(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用6X一生长伴，赶紧跟我一起来体验！",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			suifang(e){
				let id=e.memberId
				uni.navigateTo({
				 url:'/pagesB/plan/plan?sid='+id
				})
			},
			xingdong(e){
				  let id=e.memberId
				uni.navigateTo({
					url:'/pagesB/remind/remind?id='+id
				})
			},
			lookinfo(e){
				let id=e.memberId
			   // uni.navigateTo({
			   // 	url:'/pagesB/number/number?id='+id
			   // })
			   uni.navigateTo({
			   	url:'/pagesA/userinfo/userinfo?id='+id
			   })
			},
			
			search(){
				
				let p={
					phone:uni.getStorageSync('phone'),
					type:this.toptab,
					selectValue:this.searchvalue
				}
				doctorTeamList(p).then(res=>{
							  console.log(res,'团队列表')
							  this.list=res.data.data.list
							  this.totalCounts=res.data.data.totalCounts
				})
			},
			
			//点击用户后边的邀请团队
			selectrole(e){
				this.member=e
				let p={
					phone:uni.getStorageSync('phone'),
					teamId:e.id
				}
				getInvitedList(p).then(res=>{
					console.log(res)
					 this.prolist=res.data.data.tnum.split(',')
					 this.teamwin=true
					 
				})
				
				
			},
			
			
			//点击团队弹窗里边的角色 去医生列表邀请
			selectdoctor(e){
				let id=e
				let teamid=this.member.id
				this.teamwin=false
				uni.navigateTo({
					url:'/pagesA/disease/disease?roleid='+id+'&tid='+teamid
				})
			},
			lookinfocard(){
				let that=this
				uni.previewImage({
							urls: ['https://changban.dianjingkeji.net'+that.pro.tuijiancode],
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
			},
			
			
			selecttoptab(e){
				this.toptab=e
				let p={
					phone:uni.getStorageSync('phone'),
					type:this.toptab,
					selectValue:this.searchvalue
				}
				doctorTeamList(p).then(res=>{
							  console.log(res,'团队列表')
							  this.list=res.data.data.list
				})
			},
			
			
			gohome(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			gosuifang(){
				uni.navigateTo({
					url:'/pages/data/data'
				})
				// if(this.pro.reviewerstatus!=1){
				// 	uni.showModal({
				// 		title: '未认证',
				// 		content: '去认证资料',
				// 		success: function (res) {
				// 			if (res.confirm) {
				// 				console.log('用户点击确定');
				// 				uni.navigateTo({
				// 					url:'/pagesA/adddoctor/adddoctor'
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}
				// 		}
				// 	});
				// }else{
				// uni.redirectTo({
				// 	url:'/pages/data/data'
				// })
				
				// }
			},
			goxueshu(){
				uni.redirectTo({
					url:'/pages/xueshu/xueshu'
				})
			},
			gocenter(){
				uni.redirectTo({
					url:'/pages/center/center'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
  .userpage{
	  width: 750rpx;
	  box-sizing: border-box;
	  padding-bottom: 200rpx;
	  .searchbox{
		  width: 100%;
		 box-sizing: border-box;
		  padding: 20rpx 40rpx;
		  background-color: #1a4f8a;
		  .putbox{
			  width: 100%;
			  background-color: white;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  border-radius: 35rpx;
			  height: 70rpx;
			  line-height: 70rpx;
			  padding: 0 20rpx;
			  box-sizing: border-box;
			  input{
				  width: 80%;
				  height: 70rpx;
				  
			  }
			  .searchbtn{
				   box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
				  width: 100rpx;
				  height: 60rpx;
				  text-align: center;
				  line-height: 60rpx;
				  border-radius: 30rpx;
				  font-size: 30rpx;
				  font-weight: bold;
				  
				  
			  }
		  }
	  }
	  .toptabbar{
		  width: 92%;
		  margin: 20rpx auto;
		  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		  background-color: white;
		  border-radius: 20rpx;
		  box-sizing: border-box;
		  padding: 10rpx 30rpx 0 30rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-evenly;
		  font-size: 30rpx;
		  color: #8B8B8B ;
		  .itemtabbar{
			  width: 25%;
			  text-align: center;
			  font-weight: bold;
			  .line{
				  width: 60rpx;
				  height: 6rpx;
				  border-radius: 3rpx;
				  margin: auto;
			  }
		  }
		  .act{
			  font-size: 32rpx;
			  color: #1a4f8a;
			   .line{
				   background-color: #1a4f8a;
			   }
		  }
	  }
	  .listbox{
		  width: 92%;
		  margin: 20rpx auto;
		  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		  background-color: white;
		  border-radius: 20rpx;
		  box-sizing: border-box;
		  padding: 10rpx 30rpx 0 30rpx;
		  .itemlist{
			  width: 100%;
			  display: flex;
			  align-items: center;
			 border-bottom: 1rpx solid #c1c1c1;
			  padding: 20rpx 0;
			  .imgbox{
				  width: 120rpx;
				  height: 120rpx;
				  min-height: 120rpx;
				  min-width: 120rpx;
				  border-radius: 50%;
				  margin-right: 10rpx;
				 
				  image{
					  width: 100%;
					  height: 100%;
					  border-radius: 50%;
					  
				  }
			  }
			  .infobox{
				  width: 50%;
				  min-width: 350rpx;
				 
				  line-height: 2;
				  
				  .nameline{
					
					  .namebox{
						  display: flex;
						  align-items: center;
						  .level{
						  						  border: 1rpx solid #1a4f8a;
						  						  font-size: 24rpx;
						  						  font-weight: bold;
						  						  color: #1a4f8a;
						  						  padding: 2rpx 10rpx;
						  						  border-radius: 6rpx;
												  margin-left: 30rpx;
						  						  
						  }
					  }
					  
					  .name{
						  font-weight: bold;
						  margin-right: 20rpx;
					  }
					  
				  }
				  .label{
					  font-size: 26rpx;
					  font-weight: bold;
				  }
			  }
			  .right{
			
				  .btn1{
				  				  font-size: 28rpx;
				  				  min-width: 140rpx;
				  				  padding: 16rpx 10rpx;
				  				  border-radius: 10rpx;
				  				  background-color: #1a4f8a;
				  				  color: white;
				  				  text-align: center;
				  				  margin-top: 14rpx;
								  
				  }
			  }
			 
		  }
	  }
	  .pageadd{
		  width: 130rpx;
		  height: 130rpx;
		  box-sizing: border-box;
		  border-radius: 50%;
		  background-color: #1a4f8a;
		  font-size: 80rpx;
		  font-weight: bold;
        color: white;
		line-height: 130rpx;
		text-align: center;
		position: fixed;
		right: 25vw;
		top: 60vh;
		
	  }
	  
	  .winpage{
	  		 width: 750rpx;
	  		 height: 100vh;
	  		 z-index: 99999;
	  		 background-color: rgba(0, 0, 0, 0.5);
	  		 position: fixed;
	  		 top: 0;
	  		 left: 0;
	  		 bottom: 0;
	  		 right: 0;
	  		 .win{
	  			 width: 100%;
	  			 height: 90%;
	  			 position: absolute;
	  			 top: 10vh;
	  			 bottom: 0;
	  			 left: 0;
	  			 right: 0;
	  			 background-color: #f1f1f1;
	  			 border-top-right-radius: 30rpx;
	  			 border-top-left-radius: 30rpx;
	  			 padding-top: 40rpx;
				 
	  			 .wintitle{
	  				 width: 100%;
	  				 border-top: 1px solid #f1f1f1;
	  				 text-align: center;
	  				 position: relative;
	  				 padding-top: 10rpx;
	  				 .iconfont{
	  					 position: absolute;
	  					 top: 0;
	  					 right: 10rpx;
	  				 }
	  			 }
	  	.cardbox{
	  		  				 width: 80%;
	  		  				height: 60vh;
	  		  				 margin: auto;
	  		  				 background-color: white;
	  		  				 margin-top: 20rpx;
	  		  				 border-radius: 30rpx;
	  		  				 position: relative;
	  		  				 .backimg{
	  		  					 width: 100%;
	  		  					 height: 30%;
	  		  					 border-top-right-radius: 30rpx;
	  		  					 border-top-left-radius: 30rpx;
	  		  				 }
	  		  				 .infobox{
	  		  					 position: absolute;
	  		  					 top: 0;
	  		  					 left: 0;
	  		  					 right: 0;
	  		  					 box-sizing: border-box;
	  		  					 padding: 20rpx;
	  		  					 color: white;
	  		  					 .infotop{
	  		  						display: flex;
	  		  						align-items: center; 
	  		  						image{
	  		  							width: 120rpx;
	  		  							height: 120rpx;
	  		  							border-radius: 50%;
	  		  						}
	  		  						.namebox{
	  		  							margin-left: 20rpx;
	  		  							.name{
	  		  							
	  		  								color: black;
	  		  							}
	  		  							.zhichengline{
	  		  								font-size: 24rpx;
	  		  								display: flex;
	  		  								align-items: center;
	  		  								margin-top: 6rpx;
	  		  								.itemzhicheng{
	  		  									padding: 4rpx 8rpx;
	  		  									background-color: #1a4f8a ;
	  		  									color: white;
	  		  								}
	  		  							}
	  		  						}
	  		  					 }
	  		  					
	  		  				 }
	  		  				 .titlebox{
	  		  					width: 100%;
	  		  					box-sizing: border-box;
	  		  					padding: 20rpx;
	  		  					line-height: 2;
	  		  					.title{
	  		  						background-color: #E5E5E5 ;
	  		  						color: #1a4f8a;
	  		  						max-width: 40%;
	  		  						text-align: center;
	  		  					}
	  		  					.label{
	  		  					font-size: 28rpx;
	  		  					line-height: 1.8;
	  		  					}
	  		  				 }
	  		  				 .sanline{
	  		  					 width: 100%;
	  		  					 display: flex;
	  		  					 justify-content: space-between;
	  		  					 align-items: center;
	  		  					 box-sizing: border-box;
	  		  					 padding: 20rpx;
	  		  					 .left{
	  		  						 margin-top: 20rpx;
	  		  						 font-size: 28rpx;
	  		  						 line-height: 2;
	  		  					 }
	  		  					 .right{
	  		  						 width: 150rpx;
	  		  						 height: 150rpx;
	  		  						 image{
										 width: 100%;
										 height: 100%;
									 }
	  		  					 }
	  		  				 }
	  	}
	  			 .btnbox{
	  				 width: 100%;
	  				 height: 150rpx;
	  				 position: absolute;
					 top: 68vh;
					 left: 0;
	  				 display: flex;
	  				 align-items: center;
	  				 justify-content: space-evenly;
					 button{
					 						 margin: 0;
					 						 padding: 0;
					 						 line-height: 50rpx;
					 						 width: 150rpx;
					 						  height: 150rpx;
					 						  border-radius: 30rpx;
					 						  background-color: white;
					 						  text-align: center;
					 						  box-sizing: border-box;
					 						  padding-top: 40rpx;
					 						 .iconfont{
					 						 	 font-size: 44rpx;
					 						 }
					 						 .weixin{
					 						 	color: #40cf3f;
					 						 }
					 						 .xiazai{
					 						 	color: #0099ff;
					 						 }
					 						 .lianjie{
					 						 	color: #999999 ;
					 						 }
					 }
	  				 .itembtn{
	  					 width: 150rpx;
	  					 height: 150rpx;
	  					 border-radius: 30rpx;
	  					 background-color: white;
	  					 text-align: center;
	  					 box-sizing: border-box;
	  					 padding-top: 40rpx;
	  					.iconfont{
	  						 font-size: 44rpx;
	  					}
	  					.weixin{
	  						color: #40cf3f;
	  					}
	  					.xiazai{
	  						color: #0099ff;
	  					}
	  					.lianjie{
	  						color: #999999 ;
	  					}
	  				 }
	  			 }
	  		 }
			 .teamwin{
				 width: 90%;
				 height: 70%;
				 position: absolute;
				 top: 10vh;
				 bottom: 10vh;
				 left: 5%;
				 right: 5%;
				 box-sizing: border-box;
				 background-color: #f1f1f1;
				 border-radius: 30rpx;
				 padding-top: 40rpx;
				 .wintitle{
				 	  				 width: 100%;
				 	  				 border-top: 1px solid #f1f1f1;
				 	  				 text-align: center;
				 	  				 position: relative;
				 	  				 padding-top: 10rpx;
									 color: #1a4f8a;
									 font-size: 34rpx;
									 font-weight: bold;
				 	  				 .iconfont{
				 	  					 position: absolute;
				 	  					 top: -10rpx;
										 color: gray;
				 	  					 right: 10rpx;
				 	  				 }
				 }
				 .teamlistbox{
					 width: 90%;
					 margin: auto;
					 padding-top: 40rpx;
					 .itemrole{
						 width: 100%;
						 border: 1rpx solid #1a4f8a;
						 border-radius: 10rpx;
						 height: 70rpx;
						 line-height: 72rpx;
						 text-align: center;
						 color: #1a4f8a;
						 font-weight: bold;
						 font-size: 30rpx;
						 margin-bottom: 30rpx;
					 }
				 }
			 }
	  }
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  .foot-tabbar{
	  	width: 100%;
	  	height: 150rpx;
	  	position: fixed;
	  	left: 0;
	  	right: 0;
	  	bottom: 0;
	  	display: flex;
	  	align-items: center;
	  	justify-content: space-evenly;
	  	background: white;
	  	overflow: visible;  /* 允许溢出 */
	  	
	  	.itemfootbar{
	  		width: 20%;
	  		height: 100%;
	  		text-align: center;
	  		image{
	  			width: 60rpx;
	  			height: 60rpx;
	  			margin: auto;
	  		}
	  		.tabbarname{
	  			font-size: 26rpx;
	  			color: #969696;
	  			font-weight: bold;
	  		}
	  		.footact{
	  			color: #1a4f8a;
	  		}
	  		
	  	}
	  	.footbardata{
	  		height: 200rpx !important;
	  		background: white !important;
	  		box-sizing: border-box;
	  		padding-top: 25rpx;
	  		border-top-right-radius: 75rpx;
	  		border-top-left-radius: 75rpx;
	  		
	  	}
	  }
	  
  }
</style>
